<template>
  <a-modal :width="600" v-model:visible="showImportPairDialog" :footer="false" title="导入库存单价" title-align="start" :mask-closable="false" @cancel="closedDialog">
    <a-spin style="width: 100%; height: 100%" :loading="loading" tip="导入中，请稍后...">
      <div class="step-w">
        <p class="title">第1步</p>
        <p>
          <span style="color: #999">点击下载空的</span>
          <a-link href="https://cdn2.selleroa.com/saas/inventory/85373002925587457.xls">表格模板</a-link>
        </p>
      </div>
      <div class="step-w">
        <p class="title">第2步</p>
        <a-upload draggable action="/" accept=".xls,.xlsx" :limit="1" ref="uploadRef" :custom-request="uplaodFile">
          <template #upload-button>
            <div class="update-con">
              <i class="icon icon-shangchuan"></i>
              <p style="font-size: 16px">拖拽到此或点击上传表格</p>
              <p style="color: #999">（支持格式：xls、xlsx）</p>
            </div>
          </template>
        </a-upload>
      </div>
      <div class="info-text">
        <p class="title">注意事项</p>
        <p>· 点击导入配对,选择本地xlsx文件上传;</p>
        <p>· 请按照模板内容填写,模板中表头信息无法更改和删除;</p>
        <p>· 最多允许一次导入数据记录5000条</p>
        <p>· MSKU和SKU对应关系多条时,取第一条记录</p>
      </div>
    </a-spin>
  </a-modal>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { importUpdateFbaInventoryPrice } from '@/api/inventory'
  import { Message } from '@arco-design/web-vue'

  const emit = defineEmits(['closed', 'success'])
  const props = defineProps({
    isShow: {
      type: Boolean,
      default: false,
    },
  })

  let loading = ref(false)

  const showImportPairDialog = ref(props.isShow)
  const uploadRef = ref()

  // 关闭
  function closedDialog() {
    showImportPairDialog.value = false
    emit('closed')
  }
  // 开始上传
  const uplaodFile: any = async (option: any) => {
    let { fileItem, onProgress } = option
    let formData = new FormData()
    formData.append('file', fileItem.file)
    onProgress(0.5)
    loading.value = true
    const res: any = await importUpdateFbaInventoryPrice(formData)
    if (res) {
      onProgress(1)
      Message.success('导入成功')
      emit('success')
      closedDialog()
      loading.value = false
    } else {
      loading.value = false
      onProgress(0)
    }
  }
</script>
<style lang="less" scoped>
  .step-w {
    border: 1px dashed var(--color-border);
    border-radius: 4px;
    margin-bottom: 10px;
    padding: 20px;
    .title {
      margin-bottom: 10px;
    }
  }
  .info-text {
    color: #999;
    margin-top: 20px;
    font-size: 12px;
    .title {
      margin-bottom: 10px;
    }
  }
  .update-con {
    height: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .icon {
      font-size: 36px;
      color: #999;
    }
  }
</style>
